<template lang="html">
  <div class="carousel"
  @mouseenter="stopTumbleweed(),buttonVisible()"
  @mouseleave="startTumbleweed(),buttonUnvisible()">
    <div class="carousel-content" :style="{ width: contentWidth, left: contentLeft }">
      <slot></slot>
    </div>
    <div class="tool-layer" v-if="showControler">
      <div class="buttons"
      :class="{ visible: BUTTON_VISIBLE }"
      >
        <div class="button button-prev" @click="prevClick()">
          <i class="material-icons">chevron_left</i>
        </div>
        <div class="button button-next" @click="nextClick()">
          <i class="material-icons">chevron_right</i>
        </div>
      </div>
      <div class="indicator">
        <div class="indicator-item" v-for="(item,index) in carouselLength" :class="{ active: index === currentIndex }" @click="focusDot(index)">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  props: {
    // 当前激活项
    currentItemIndex: {type: Number, default: 0},
    // 是否显示控制层
    showControler: {type: Boolean, default: false},
    // 是否自动轮播
    autoplay: {type: Boolean, default: true},
    // 轮播间隔
    interval: {type: [Number, String], default: 3000}
  },
  data () {
    return {
      length: 0,
      BUTTON_VISIBLE: false,
      currentIndex: this.currentItemIndex
    }
  },
  methods: {
    buttonVisible () {
      this.BUTTON_VISIBLE = true
    },
    buttonUnvisible () {
      this.BUTTON_VISIBLE = false
    },
    prevClick () {
      if (this.currentIndex > 0) {
        this.currentIndex--
      } else {
        this.currentIndex = this.carouselLength - 1
      }
    },
    nextClick () {
      if (this.currentIndex < this.carouselLength - 1) {
        this.currentIndex++
      } else {
        this.currentIndex = 0
      }
    },
    focusDot (index) {
      if (this.currentItemIndex >= 0 && this.currentItemIndex <= this.carouselLength - 1) {
        this.currentIndex = index
      }
    },
    startTumbleweed () {
      if (this.autoplay) {
        this.timer = setInterval(this.nextClick, this.interval)
      }
    },
    stopTumbleweed () {
      if (this.autoplay) {
        clearInterval(this.timer)
      }
    }
  },
  computed: {
    carouselLength () {
      return this.length
    },
    contentWidth () {
      return this.carouselLength * 100 + '%'
    },
    contentLeft () {
      return -(this.currentItemIndex * 100) + '%'
    }
  },
  watch: {
    currentIndex (val) {
      this.$emit('roll', val)
    }
  },
  mounted (autoplay) {
    this.startTumbleweed()
  }
}
</script>

<style lang="scss" scoped>

@mixin make-circle ($size) {
  width: $size;
  height: $size;
  border-radius: 0.5 * $size;
}

@mixin pull-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel {
  position: relative;

  width: 100%;
  height: 100%;
  cursor: pointer;
  background-color: #fff;
  z-index: 0;
  overflow: hidden;

  .carousel-content {
    position: absolute;
    top: 0;
    display: flex;
    height: 100%;
    transition: left 300ms;
  }

  .tool-layer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none;
    .buttons {
      position: absolute;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: none;
      width: 100%;
      height: 100%;
      padding: 0 20px;
      transition: all 300ms;
      visible:none;
      opacity: 0;
      &.visible {
        visible: visible;
        opacity: 1;
      }
      .button {
        @include make-circle (60px);
        user-select: none;
        background-color: rgba(0, 0, 0, .5);
        pointer-events: auto;
        i {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          font-size: 28px;
          color: #fff;
        }
      }
    }

    .indicator {
      position: absolute;
      bottom: 10px;
      width: 100%;
      display: flex;
      justify-content: center;
      cursor: -webkit-grab;
      pointer-events: auto;
      z-index: 3;
      .indicator-item {
        @include make-circle (4px);
        margin: 0 5px;
        background-color: #333;
        cursor: pointer;
        &.active {
          background-color: #fff;
        }
      }
    }
  }
}
</style>
